<template>

    <div class="wallet-recent-record">
        <h3>
            <strong>Recent developments</strong>
            <nuxt-link to="/billing/transaction">See more</nuxt-link>
            <small><i class="iconfont icon-xiangqing1"></i>Currency unit USD</small>
        </h3>

        <div class="wallet-recent-table">
            <table>
                <thead>
                    <tr>
                        <th>Order ID</th>
                        <th>Transaction date</th>
                        <th>Transaction types</th>
                        <th>Amount</th>
                        <th>Balance</th>
                        <th>Transaction status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="6" style="padding: 0;height: 9px;"></td>
                    </tr>
                    <tr v-for="item in records" :key="item.id">
                        <td v-text="item.order_code || '---'"></td>
                        <td v-text="getTimeByDate(item.created_at)"></td>
                        <td v-text="getTradeById(item.trade_type)"></td>
                        <td v-text="getPriceFormat(item.trade_sum)"></td>
                        <!-- 支付中的不显示余额 -->
                        <td v-if="item.transaction_status == 1 || item.transaction_status == 2">--</td>
                        <td v-else v-text="getPriceFormat(item.balance)"></td>
                        <td v-html="getStatusHtml(item)"></td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>

</template>
<script>
import { payment_type, trade_type } from "@/utils/payment-type";
export default {
    props: {
        config: { type: Object, default: () => ({}) },
        records: { type: Array, default: () => [] },
    },
    data () {
        return {

        };
    },


    methods: {

        getTimeByDate (date) {
            let str = "";
            if (date) {
                let time = new Date(date).getTime();
                str += this.$timeFormat(time);
            } else {
                str = "- -";
            }
            return str;
        },

        getPriceFormat (value) {
            const val = parseInt(value)
            if (val) {
                return (val / 100).toFixed(2)
            } else {
                return '0.00'
            }
        },
        getPaymentById (id) {
            if (id != 0) {
                return payment_type[id];
            } else {
                return "consume";
            }
        },
        getTradeById (id) {
            return trade_type[id];
        },
        getStatusHtml (item) {

            const code = item.transaction_status || 0;
            if (code == 0 || code == 10) {
                return '<span style="color: #008552" >Completed</span>'
            } else if (code == 1) {
                return '<span style="color: #B88800" >Pending</span>'
            } else if (code == 2) {
                return '<span style="color: #C62828" >Delayed transaction</span>'
            } else if (code == 11) {
                return '<span style="color: #757575" >Refunding</span>'
            } else if (code == 20) {
                return '<span style="color: #C62828" >Failed</span>'
            }
        },

    },
    created () {

    },
};
</script>
<style lang="scss" scoped>
.wallet-recent-record {
    margin-top: 40px;

    h3 {
        display: flex;
        align-items: center;
        height: 18px;
        font-weight: normal;
        position: relative;

        strong {
            font-size: 16px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #212121;
            line-height: 18px;
        }

        small {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            flex: 1;
            font-size: 12px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #555555;
            line-height: 14px;

            i {
                font-size: 14px;
                color: #acacac;
                margin-right: 4px;
                height: 14px;
                line-height: 14px;
            }
        }

        a {
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #087196;
            line-height: 18px;
            text-decoration: underline;
            margin-left: 4px;

            &:hover {
                text-decoration: none;
                color: #287e9c;
            }
        }
    }

    .wallet-recent-table {
        margin-top: 16px;
        background: #ffffff;
        border-radius: 8px;
        border: 1px solid #ebebeb;
        padding: 0 14px;
        position: relative;
        overflow: hidden;
    }

    table {
        width: 100%;
        position: relative;
        border-collapse: collapse;

        thead {
            color: #000000;
            white-space: nowrap;

            th {
                width: 25%;
                height: 40px;
                padding: 0 24px;
                font-size: 14px;
                font-family: Roboto-Medium, Roboto;
                font-weight: 500;
                color: #292929;
                position: relative;

                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    height: 1px;
                    background-color: #ebebeb;
                }

                &:first-child::before {
                    left: -14px;
                }

                &:last-child::before {
                    right: -14px;
                }
            }
        }

        tbody {
            td {
                text-align: center;
                padding: 16px;
                font-size: 14px;
                font-family: Roboto-Regular, Roboto;
                font-weight: 400;
                color: #000000;
                line-height: 16px;

                &:first-child {
                    border-radius: 8px 0 0 8px;
                }

                &:last-child {
                    border-radius: 0 8px 8px 0;
                }
            }

            tr:nth-child(2n + 3) td {
                background: #f8f8f8;
            }
        }
    }
}
</style>
